<div style="margin-bottom: 16px;">
  <button nz-button nzType="primary" [nzLoading]="loading" (click)="loadListData()">刷新</button>
</div>
<nz-table #nzTable [nzData]="dataList" [nzLoading]="loading" nzSize="small" nzBordered="true" nzFrontPagination="false"
  nzShowPagination="false">
  <thead>
    <tr>
      <th width="50px">#</th>
      <th>插件名称</th>
      <th>显示名称</th>
      <th>状态</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of nzTable.data; let index = index;">
      <td width="50px">{{index + 1}}</td>
      <td>{{data.name}}</td>
      <td>{{data.displayName}}</td>
      <td>
        {{data.isInstalled ? (data.isEnabled ? '已启用' : '未启用') : '已卸载'}}
      </td>
      <td>
        <ng-container *ngIf="data.isInstalled; else elseOptionTemplate">
          <button nz-button nzType="primary" (click)="showModal(data)">设置</button>
          <button nz-button nzType="danger" (click)="handleUninstall(data)">卸载</button>
        </ng-container>
        <ng-template #elseOptionTemplate>
          <button nz-button (click)="handleInstall(data)">安装</button>
        </ng-template>
      </td>
    </tr>
  </tbody>
</nz-table>
<nz-modal nzTitle="设置" [(nzVisible)]="isVisible" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" [nzOkLoading]="isOkLoading">
  <form nz-form>
    <nz-form-item>
      <nz-form-label [nzSpan]="5">插件名称</nz-form-label>
      <nz-form-control [nzSpan]="18">{{selectedPlugin.name}}</nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="5">状态</nz-form-label>
      <nz-form-control [nzSpan]="18">
        <nz-switch [(ngModel)]="formData.enabled" name="enabled" nzCheckedChildren="已启用" nzUnCheckedChildren="未启用"></nz-switch>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="5">顺序</nz-form-label>
      <nz-form-control [nzSpan]="18">
        <nz-input-number [(ngModel)]="formData.order" name="order" [nzMin]="0" [nzMax]="999" [nzStep]="1"></nz-input-number>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="5">显示名称</nz-form-label>
      <nz-form-control [nzSpan]="18">
        <input type="text" nz-input [(ngModel)]="formData.displayName" name="displayName" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item *ngFor="let attribute of selectedPlugin.attributeConfigs">
      <nz-form-label [nzSpan]="5" [nzRequired]="attribute.required">{{attribute.name}}</nz-form-label>
      <nz-form-control [nzSpan]="18">
        <input type="text" nz-input [(ngModel)]="formData[attribute.code]" [name]="attribute.code" />
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-modal>